<template>
  <div class="floating-buttons-container" :class="{ 'expanded': isExpanded }">
    <div class="main-button" @click="toggleExpand">
      <i class="el-icon-plus main-icon"></i>
    </div>
    
    <div class="button-list">
      <div 
        v-for="(button, index) in visibleButtons" 
        :key="button.id"
        class="action-button"
        :class="{ 'active': button.active }"
        :style="{ 
          '--delay': `${(visibleButtons.length - index) * 0.05}s`,
          '--color': button.color
        }"
        @click="handleButtonClick(button)"
        :title="button.title"
      >
        <i :class="button.icon"></i>
        <span class="button-label">{{ button.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'FloatingButtons',
  props: {
    buttons: {
      type: Array,
      default: () => []
    }
  },
  emits: ['button-click'],
  setup(props, { emit }) {
    const router = useRouter()
    const isExpanded = ref(false)
    
    // 默认按钮配置
    const defaultButtons = [
      {
        id: 'home',
        icon: 'el-icon-house',
        label: '首页',
        title: '返回首页',
        color: '#1890ff',
        route: '/'
      },
      {
        id: 'add',
        icon: 'el-icon-plus',
        label: '添加',
        title: '添加新条目',
        color: '#52c41a',
        action: 'add'
      },
      {
        id: 'search',
        icon: 'el-icon-search',
        label: '搜索',
        title: '搜索内容',
        color: '#722ed1',
        action: 'search'
      },
      {
        id: 'refresh',
        icon: 'el-icon-refresh',
        label: '刷新',
        title: '刷新数据',
        color: '#faad14',
        action: 'refresh'
      },
      {
        id: 'help',
        icon: 'el-icon-question',
        label: '帮助',
        title: '获取帮助',
        color: '#13c2c2',
        action: 'help'
      }
    ]
    
    // 合并自定义按钮和默认按钮
    const visibleButtons = computed(() => {
      if (props.buttons && props.buttons.length > 0) {
        return props.buttons
      }
      return defaultButtons
    })
    
    // 展开/收起菜单
    const toggleExpand = () => {
      isExpanded.value = !isExpanded.value
    }
    
    // 处理按钮点击
    const handleButtonClick = (button) => {
      // 如果是导航按钮，使用路由导航
      if (button.route) {
        router.push(button.route)
      } 
      // 否则发出按钮点击事件
      else {
        emit('button-click', button)
      }
      
      // 点击后折叠菜单
      if (button.id !== 'main') {
        setTimeout(() => {
          isExpanded.value = false
        }, 300)
      }
    }
    
    return {
      isExpanded,
      visibleButtons,
      toggleExpand,
      handleButtonClick
    }
  }
}
</script>

<style scoped>
.floating-buttons-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  pointer-events: none;
}

.main-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff, #722ed1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: auto;
  z-index: 10;
  position: relative;
  overflow: hidden;
}

.main-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translate(-100%, -100%) rotate(45deg); }
  30%, 100% { transform: translate(100%, 100%) rotate(45deg); }
}

.main-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.main-icon {
  font-size: 24px;
  color: white;
  transition: transform 0.3s ease;
}

.expanded .main-icon {
  transform: rotate(45deg);
}

.button-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.expanded .button-list {
  opacity: 1;
  pointer-events: auto;
}

.action-button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color, #ffffff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  transform: scale(0) translateY(40px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: var(--delay, 0s);
  position: relative;
}

.expanded .action-button {
  transform: scale(1) translateY(0);
}

.action-button:hover {
  transform: scale(1.1) translateY(0);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.action-button.active {
  background-color: #f5222d;
}

.action-button i {
  font-size: 20px;
}

.button-label {
  position: absolute;
  right: 60px;
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.action-button:hover .button-label {
  opacity: 1;
  transform: translateX(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .floating-buttons-container {
    bottom: 20px;
    right: 20px;
  }
  
  .main-button {
    width: 48px;
    height: 48px;
  }
  
  .action-button {
    width: 40px;
    height: 40px;
  }
  
  .action-button i {
    font-size: 18px;
  }
  
  .button-list {
    gap: 12px;
    margin-bottom: 12px;
  }
}
</style> 